<template>
  <div class="sidebar">
    <div class="contentBox" v-for="item in pinia.menu" :key="item.id">
      <div class="menuBox" @click="showSubmenu(item)">
        <el-icon size="36">
          <component :is="item.icon"></component>
        </el-icon>
        {{ item.title }}
      </div>
    </div>
    <el-drawer
      v-model="drawer"
      direction="btt"
      size="60%"
      :with-header="false"
      :show-close="false"
    >
      <div class="submenuBox">
        <div
          class="submenuBox-content"
          v-for="item in submenu.data"
          :key="item.id"
        >
          <el-tag @click="onJump(item.route)">{{ item.title }}</el-tag>
        </div>
      </div>
    </el-drawer>
    <el-button
      class="logoutCss"
      type="primary"
      color="#ea5b24"
      @click="loginout"
      >退出登录</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import { usePermissStore } from "../../store/permiss";
import { useRouter } from "vue-router";
const pinia = usePermissStore();
const router = useRouter();

const drawer = ref(false);
let submenu: any = reactive([]);
// 弹出子菜单
function showSubmenu(item) {
  submenu.data = item.children;
  drawer.value = true;
}
// 跳转
function onJump(url) {
  router.push(url);
}

// 退出登录
const loginout = () => {
  ElMessageBox.confirm("是否确认退出登录?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    localStorage.removeItem("X-Access-Token");
    router.push("/login");
  });
};

onMounted(() => {
  pinia.getDataDictionary();
  pinia.setDisabled();
});
</script>

<style lang="less" scoped>
.sidebar {
  box-sizing: border-box;
  display: grid;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fill, 33%);
  width: 100%;
  padding: 18px;

  .contentBox {
    box-sizing: border-box;
    width: 100%;
    height: 90px;
    padding: 10px;
    .menuBox {
      width: 90px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border: 1px solid #353535;
      border-radius: 12px;
    }
  }

  .submenuBox {
    box-sizing: border-box;
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(auto-fill, 33%);
    width: 100%;
    .submenuBox-content {
      padding: 8px;
      span {
        width: 100%;
        height: 60px;
      }
    }
  }
}
.logoutCss {
  position: absolute;
  bottom: 30px;
  right: 30px;
}
</style>
